<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>hsycmsAlert弹窗插件</title>
    <link rel="stylesheet" href="static/css/hsycmsAlert.min.css" />
    <script src="static/js/jquery-1.10.2.js"></script>
    <script src="static/js/hsycmsAlert.min.js"></script>
  </head>

  <body>
    <style>
      .btnss {
        max-width: 60%;
        display: flex;
        height: 100%;
        justify-items: center;
        flex-direction: column;
        justify-content: center;
        margin: 0 auto;
      }
      .box {
        padding: 20px;
        transform: translateY(100px);
        overflow: hidden;
        color: #333;
      }
      .box p {
        font-size: 16px;
        color: #444;
        padding-top: 10px;
      }
      .btnss button {
        padding: 10px;
        cursor: pointer;
        height: 50px;
        min-width: 120px;
        font-size: 14px;
        border: 0;
        color: #fff;
        margin: 10px 0;
        border-radius: 40px;
      }
    </style>
    <div class="box">
      <div class="btnss">
        <button type="button" onclick="alert('普通弹窗文字说明')" style="background: #333">
          普通弹窗
        </button>
        <button type="button" onclick="tips('提示文字说明')" style="background: #f68909">
          提示弹窗
        </button>
        <button type="button" onclick="confirm()" style="background: #14bf24">询问弹窗</button>
        <button type="button" onclick="loading()" style="background: #f345dc">Loading</button>
        <button type="button" onclick="success()" style="background: #238af4">成功</button>
        <button type="button" onclick="error()" style="background: #f54655">失败</button>
      </div>
    </div>

    <script>
      //参数说明 id,文字,方法

      //普通弹窗
      function alert(txt) {
        hsycms.alert(txt, () => {
          console.log('关闭后')
        })
      }

      //提示弹窗
      function tips(txt) {
        hsycms.tips(
          txt,
          () => {
            console.log('提示关闭后')
          },
          2000
        )
      }

      //询问弹窗
      function confirm() {
        hsycms.confirm(
          '确定要这么做',
          function (res) {
            hsycms.success('点击了确定')
          },
          function (res) {
            hsycms.fail('点击了取消')
          }
        )
      }

      //操作成功调用
      function success() {
        hsycms.success(
          '操作成功',
          () => {
            console.log('操作成功关闭后')
          },
          1800
        )
      }

      //操作失败调用
      function error() {
        hsycms.fail(
          '操作失败',
          () => {
            console.log('操作失败关闭后')
          },
          1800
        )
      }

      //显示loading
      function loading() {
        hsycms.loading('正在加载')
        //2秒后隐藏
        setTimeout((res) => {
          hsycms.closeAll()
        }, 2000)
      }
    </script>
  </body>
</html>
